<template>
  <PageWrapper title="测试">
    <a-card>
      <ZSelectUserByDept v-model:value="userId" @change="userChange" />
      <ZSelectDept v-model:value="depts" :multiple="true" :treeCheckable="true" />
      <ZSelectBiz
        v-model:value="userId2"
        :columns="columns"
        listUrl="/user/list"
        rowKey="username"
        displayKey="nickname"
      />
      <ZSelectPage
        v-model:value="userId3"
        url="/user/list"
        show-search
        mode="multiple"
        :optionKey="{ label: 'nickname', value: 'username' }"
      />
    </a-card>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, Ref } from 'vue';
  import { BasicColumn } from '@mxpio/components/src/Table';
  import { PageWrapper } from '@mxpio/components/src/Page';
  import ZSelectUserByDept from '@mxpio/components/src/Form/src/zz/ZSelectUserByDept/index.vue';
  import ZSelectDept from '@mxpio/components/src/Form/src/zz/ZSelectDept/index.vue';
  import ZSelectBiz from '@mxpio/components/src/zz/ZSelectBiz.vue';
  import ZSelectPage from '@mxpio/components/src/Form/src/zz/ZSelectPage/index.vue';

  let userId: Ref<string> = ref('admin');

  let userId2: Ref<string> = ref('admin');
  let userId3: Ref<string> = ref('admin,1');
  let depts = ref('bm001,bm001-1');

  const columns: BasicColumn[] = [
    {
      title: '用户账号',
      dataIndex: 'username',
    },
    {
      title: '用户姓名',
      dataIndex: 'nickname',
    },
  ];

  function userChange(val) {
    console.log('userChange', val);
  }

  setTimeout(() => {
    userId2.value = 'admin,1';
  }, 2000);
</script>
